<template>
    <div>
        <NavTopBar title="商品详情" :fixed="true" :placeholder="true" />

        <div class="pro">
            <img
                class="pro_img"
                :src="state.productInfo.goodsCoverImg"
                alt=""
            />
            <p class="pro_title">{{ state.productInfo.goodsName }}</p>
            <p class="pro_desc">免邮费 顺丰快递</p>
            <div class="pro_price">
                <span>¥{{ state.productInfo.sellingPrice || "" }}</span>
            </div>
            <div class="pro_intro">
                <ul class="clearfix">
                    <li>概述</li>
                    <li>参数</li>
                    <li>安装服务</li>
                    <li>常见问题</li>
                </ul>
                <div
                    class="pro_intro_content"
                    v-html="state.productInfo.goodsDetailContent || ''"
                ></div>
            </div>
        </div>

        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" />
            <van-action-bar-icon icon="cart-o" text="购物车" @click="go2car" />
            <van-action-bar-button
                color="#be99ff"
                type="warning"
                text="加入购物车"
                @click="addCar"
            />
            <van-action-bar-button
                color="#7232dd"
                type="danger"
                text="立即购买"
                @click="buyNow"
            />
        </van-action-bar>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import NavTopBar from "@/components/NavTopbar.vue";
import baseHook from "./hook/base";
export default defineComponent({
    components: { NavTopBar },
    setup() {
        const { buyNow, addCar, state, go2car } = baseHook();
        return { buyNow, addCar, state, go2car };
    },
});
</script>

<style lang="scss" scoped>
.pro {
    padding: 10px;
    &_img {
        width: 100%;
    }
    &_title {
        font-size: 18px;
        color: #333;
        line-height: 24px;
    }
    &_desc {
        font-size: 14px;
        color: #999;
        margin: 5px 0;
    }
    &_price {
        color: #f63515;
        font-size: 20px;
    }
    &_intro {
        font-size: 10px;
        :deep img {
            max-width: 100%;
        }
        ul {
            margin: 10px 0;
            li {
                float: left;
                width: 25%;
                text-align: center;
                font-size: 14px;
                border-right: 1px solid #999;
                line-height: 30px;
                font-size: 14px;
                &:last-child {
                    border: none;
                }
            }
        }
    }
}
</style>
